<html>
<head>

<!-- dependencies -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js" type="text/javascript"></script>
<script src="dependencies/jquery.metadata.js" type="text/javascript"></script>

<!-- jsonf plugin -->
<script src="jquery.jsonf.js" type="text/javascript"></script>

<!-- optional pretty printing -->
<script src="dependencies/bodurov.com/json.formatter.js" type="text/javascript"></script>
<link href="dependencies/bodurov.com/json.formatter.css" type="text/css" rel="stylesheet" />
<style>
.fifty {
	float: left;
	margin-right: 1em;
}
</style>

</head>
<body>

<h4>JSONForms Live Demo</h4>
<p>Modify any field and when you move out of the field ("change" event), the JSON will update automatically.
After playing around a bit, view the source code: notice how the field names are very simple and the hierarchy is
specified entirely using the DOM parent structure. The one-liner that does all the work is: <span style="font-family: monospace">var json = $('#myform').jsonf()</span>.
(<a href="http://code.google.com/p/jsonf/">Return to JSONForms</a>).</p>

<div class="fifty">

  <div id="myform">
	<p>Name: <input name="name" value="Joe">
	<p>Age: <input name="age" value="35">
	<p>Mood: <select id="mood" name="mood"><option/><option>groovy</option><option>forlorn</option><option>snappy</option></select>
	<p><input id="awesome" name="awesome" type="checkbox" value="true"> <label for="awesome">Awesome</label>
	<p>Race: <input id="race1" name="race" type="radio" value="human"> <label for="race1">Human</label>
	         <input id="race2" name="race" type="radio" value="alien"> <label for="race2">Alien</label>
	<div class="jsonf" name="bio">
		<h3>Bio</h3>
		<p class="jsonf-array {name:'hobbies'}">Hobbies: <input value="coloring"><input value="music"><input value="meditation">
		<fieldset class="jsonf {name:'education'}">
			<legend>Education</legend>
			<div class="jsonf-array {name:'degrees'}">
			<p class="jsonf">Degree: <input name="type" value="BS"><input name="concentration" value="Sociology">
			<p class="jsonf">Degree: <input name="type" value="MS"><input name="concentration" value="Computer Science">
			<p class="jsonf">Degree: <input name="type" value="PhD"><input name="concentration" value="Philosophy">
			</div>
		</fieldset>
	</div>
	<p><button id="submit">Submit</button>
  </div>

</div>

<div class="fifty">
  <pre id="output"></pre>
</div>

<script>
  $(document).ready(function(){
	function printform() {
		var json = $('#myform').jsonf();
		$('#output').addClass('CodeContainer').html(ProcessObject(json,0));
	};
	$('#myform').change(printform);
	$('#submit').click(printform);
	printform();
  });
</script>

</body>
</html>